<template>
	<!-- 施工问题 -->
	<view class="flex-col page">
		<!-- <view class="back-w" style="position: fixed;z-index: 9; height: 100rpx;">
			<view class="u-m-l-10" @click="Back()">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="f-w-l">
				施工问题</view>
		</view> -->
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col section_1">
					<view class="justify-between group_1">
						<text class="text_1" @click="buildTab(0)">全部</text>
						<text class="text_2" @click="buildTab(1)">待整改</text>
						<text class="text_3" @click="buildTab(2)">待确认</text>
						<text class="text_4" @click="buildTab(3)">已整改</text>
					</view>
					<view class="section_2" v-if="state==0">
						<!--*-->
					</view>
					<view class="section_3" v-else-if="state==1">
						<!--*-->
					</view>
					<view class="section_4" v-else-if="state==2">
						<!--*-->
					</view>
					<view class="section_5" v-else-if="state == 3">
						<!--*-->
					</view>
				</view>
				<view class="flex-col list">
					<view v-if="buildProList!=''">
						<view class="flex-col list_1" v-for="(item, i) in buildProList" :key="i">
							<view class="justify-between">
								<view class="flex-row group_4 view">
									<text class="text_5">{{item.issueUserName}}</text>
									<!-- 巡检员 工长 -->
									<view class="flex-row text-wrapper view_1">
										<text class="text_7" v-if="item.issueUserRoleName == 105">巡检员</text>
										<text class="text_7" v-else-if="item.issueUserRoleName == 104">工长</text>
									</view>
								</view>
								<text class="text_10" v-if="item.rectificationStatus == 1">待整改</text>
								<text class="text_10" v-else-if="item.rectificationStatus == 2">待确认</text>
								<text class="text_10" v-else-if="item.rectificationStatus == 4">待用户确认</text>
								<text class="text_10" v-else-if="item.rectificationStatus == 5">用户已拒绝</text>
								<text class="text_10" v-else>已整改</text>
							</view>
							<!-- 问题类型 -->
							<text class="text_11">问题类型:{{item.issueTypeName}}</text>
							<!-- 问题图片 -->
							<view class="listConpic">
								<view v-if="String(item.comments)!='null'||item.comments!=''" class="flex-row flex-full">
									<view class="imagegrid">
										<template v-for="(tempItem,i) in item.issueMedias">
										
											<image  :key="i" :src="tempItem" mode="" v-if="checkFile(tempItem,'image')"
												class="flex-row" @click.stop="prviewImage(item.issueMedias,i)"></image>
											<view  v-else class="videoview media" @click="goVideo(tempItem)">
												  <image class="equal-division-item" :src="tempItem+'?x-oss-process=video/snapshot,t_1000,m_fast'" ></image>
											<image
												  :src="$IMG_URL+'16557867901398396466.png'"
												  class="play"
												/>
												</view>
										</template>
										
									</view>
								</view>
								<view v-else style="color: #999;font-size: 24rpx;">暂无图片</view>
							</view>
							<text class="text_13">{{item.issueContent}}</text>
							<view class="flex-row group_6">
								<text class="text_15">{{item.insertTime}}</text>
							</view>
							<view class="reform" v-if="item.rectificationStatus==1" @click="clickex(item)">
								<button>去整改</button>
							</view>
							<!--  -->
							<view v-if="item.comments!=null">
								<view v-for="(text,j) in item.comments">
									<view class="flex-col" style="border-top: 1px solid #eee;">
										<view class="flex-col list-item"
											:class="text.isUserReplyStatus == 0?'list-itemLine':text.isUserReplyStatus == 2?'list-itemLine':''">
											<view class="justify-between">
												<view class="flex-row group_14 view_3">
													<text class="text_5">{{text.userName}}</text>
													<view class="flex-col  text-wrapper view_1">
														<text class="text_7" v-if="text.userRoleName  == 105">巡检员</text>
														<text class="text_7"
															v-else-if='text.userRoleName  == 104'>工长</text>
													</view>
												</view>
											</view>
											<view class="flex-row equal-division">
												<view v-if="text.responseImgs" class='flex-row'
													style='flex-wrap:wrap; width: 100%; gap:15rpx;'>
													<view class="imagegrid" v-for="(aa,k) in text.responseImgs" :key="k">
													         <image   :src="aa" mode="" v-if="checkFile(aa,'image')"
																class="flex-row" @click.stop="prviewImage(text.responseImgs,j)"></image>
															<view  v-else class="videoview media" @click="goVideo(aa)">
																  <image class="equal-division-item" :src="aa+'?x-oss-process=video/snapshot,t_1000,m_fast'" ></image>
															<image
																  :src="$IMG_URL+'16557867901398396466.png'"
																  class="play"
																/>
															</view>
													</view>
												</view>
											</view>
											<text class="text_13">{{text.responseContent}}</text>
											<view class="flex-row group_6">
												<text class="text_15">{{text.responseTime }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else-if="buildProList==''">
						<u-empty style="height: 70vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				type: '',
				buildProList: [],
				state: 0,
				inspectionFrequencyId: '',
				issueMedias: ['http://16zhuangcheng.cn/35F0FFBCF3284F9B873E6E1C9170DB7D.jpg',
					'http://16zhuangcheng.cn/35F0FFBCF3284F9B873E6E1C9170DB7D.jpg',
					'http://16zhuangcheng.cn/35F0FFBCF3284F9B873E6E1C9170DB7D.jpg',
					'http://16zhuangcheng.cn/35F0FFBCF3284F9B873E6E1C9170DB7D.jpg',
				]
			};
		},
		onPullDownRefresh() {

			this.getlist();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {
			if (option.inspectionNumId) {
				this.type = "pro"
				this.inspectionFrequencyId = option.inspectionNumId;
			}
			console.log(option);
			if (option.ordersId) {
				this.type = 'order'
				this.inspectionFrequencyId = option.ordersId;
			}
           
		},
		created() {
			this.getlist();
		},
		methods: {
			goVideo(url) {
				uni.navigateTo({
					url: "/pages/video/video?url=" + url
				})
			},
			clickex(item) {
				console.log(item, 'item')
				uni.navigateTo({
					url: '/pages/onSite/onSiteIndex/PatroServiceEX/PatroServiceEX?inspectionNumId=' + item
						.inspectionId + '&event=' + item.issueId
				})
			},
			Back() {
				uni.switchTab({
					url: 'pages/index'
				})
				uni.navigateTo({
					url: 'pages/foreman/foreman'
				})
				// let pageNum = 2
				// let pages = getCurrentPages(); // 当前页面
				// let beforePage = pages[pages.length - pageNum];
				// uni.navigateBack({
				// 	success: function() {
				// 		// console.log(beforePage)
				// 		beforePage.$vm.$refs.Foreman.getlist();
				// 	}

				// })
			},
			buildTab(index) {
				this.state = index;

				this.getlist(index)
			},
			getvieworders() {
				//获取信息
				this.$http('common.getInfolist', {
					ordersId: this.ordersId,
					type: '5',
					inspectionFrequencyId: this.inspectionFrequencyId
				}).then(res => {

					if (res.code == 200) {
						this.infodata = res.data
					}
				})
			},
		   checkFile(fileValue,type) {
			    console.log("fileValue==" + fileValue);
			    let index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
			  let   fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
			    if(type == 'video') {
			        if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
			            return false;
			        }
			    }
				
			    if(type == 'image') {
			        if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
			            return false;
			        }
			    }
			 
			    return true;
			},
			getlist(index) {
				this.buildProList = [];
				console.log(this.type);
				if (this.type == 'pro') {
					this.$http('lcheck.querylssues', {
						inspectionId: this.inspectionFrequencyId,
						rectificationStatus: index
					}).then(res => {
						// console.log(res.data,'data')
						if (res.code == 200) {
							this.buildProList = res.data;
						} else {
							uni.showToast({
								icon: "error",
								title: res.msg
							})
						}
					})
				} else if (this.type == 'order') {
					this.$http('lcheck.queryAllIssuesByOrderId', {
						orderId: this.inspectionFrequencyId,
						rectificationStatus: index
					}).then(res => {
						// console.log(res.data,'data')
						if (res.code == 200) {
							// console.log(res.data)
							this.buildProList = res.data;
						} else {
							uni.showToast({
								icon: "error",
								title: res.msg
							})
						}
					})
				}

			},
			prviewImage(urls, index) {
				console.log(urls);
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	ul li {
		list-style: none;
	}
.imagegrid{
		    display: grid;
		    grid-template-columns: repeat(3,1fr);
		    gap: 10px;
	}
	.videoview{
	  position: relative;
		
		
	}
	.videoview .play {
	  width: 80rpx;
	  height: 80rpx;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	}
	.media{
		width: 208rpx;
		height: 208rpx;
		position: relative;
	
			}
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.list_1 {
		padding: 20rpx 24rpx;
		margin: 20rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
	}
.list_1:first-child{
	margin-top:0 !important;
}
	.list-item {
		padding: 30rpx 0 34rpx;
	}

	.text_11 {
		margin-top: 24rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.flex-full {
		flex-wrap: wrap;
		width: 100%;
	}

	.flex-fulls {
		display: flex;
		gap: 15rpx;
		flex-wrap: wrap;
		width: 100%;
	}

	.equal-division {
		margin-top: 33rpx;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		height: 100%;
	}

	.group_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		color: #FF371D;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		letter-spacing: 1rpx;
	}

	.equal-division-item {
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.equal-division-item_1 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.text_15 {
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {
		margin-top: 20rpx;
		letter-spacing: 1rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_6 {
		margin-top: 16rpx;
	}

	.equal-division-item_2 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
	}

	.text_17 {
		margin-left: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_5 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 30rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text-wrapper {
		margin-left: 15rpx;
		flex-shrink: 0;
	}

	.text_7 {
		display: flex;
		align-items: center;
		margin-top: -1rpx;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		height: 100vh;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding-left: 66rpx;
		padding-right: 51rpx;
		background-color: #ffffff;
	}

	.list {
		padding: 20rpx 24rpx 32rpx;
	}

	.group_1 {
		padding: 25rpx 0 27rpx;
	}

	.section_2 {
		margin-left: 3rpx;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.section_4 {
		margin-left: 59%;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.section_5 {
		margin-left: 89%;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.section_3 {
		margin-left: 28%;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.text_1 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_2 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_3 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.list-item:first-of-type {
		border-bottom: solid 1rpx #eeeeee;
	}

	.view {
		margin-bottom: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.image_3 {
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.view_1 {
		display: flex;
		flex-direction: row;
		border-radius: 16rpx;
		height: 32rpx;
		width: 95rpx;
		border: 1px solid #1D6AFF;
		border-radius: 28rpx;
	}

	.reform {
		width: 100%;
		margin: 0 auto;
		border-top: 1px solid #EEEEEE;
		margin-top: 24rpx;
	}

	.reform button {
		margin-top: 20rpx;
		width: 150rpx;
		height: 60rpx;
		font-size: 24rpx;
		background-color: #1D6AFF;
		border-radius: 56rpx;
		color: #fff;
		float: right;
	}

	.listConpic {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
	}

	.listConpic image,
	.image {
		width: 208rpx;
		height: 208rpx;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
	}
</style>
